<template>
	<view  class="home">
		<view class="header">
			<view @click="navTo('/pages/home/rule', {type:'level'})" style="color:#fff;text-align:center;position:absolute;;top:calc(var(--status-bar-height) + 40rpx);right:0;width: 110rpx;height:56rpx;line-height:56rpx;color: #fff;font-size:26rpx;
border-radius: 28rpx 0px 0px 28rpx;" :style="{background: $utypeprimary}">{{$t('common.rules')}}</view>
			<view class="circle" style="">
				<view class="dot-box">
					<view 
					class="dot" 
					:style="{top: dotPosition(fixed * index - current * fixed).y, left: dotPosition(fixed * index - current * fixed).x}" 
					v-for="(item, index) in card" 
					:key="index"
					:class="{currentDot:current == index}"
					>
						<view class="dot-text" :style="{transform: angle(fixed * index - current * fixed)}">{{$levelArr[item.level || 0]}}</view>
					</view>
					<view class="circle-text">
						<view class="lv">
							{{$levelArr[$store.getters.userInfo.level || 0]}}
						</view>
						<view class="balance">
							{{$t('common.balance')}}: <span>{{$currency}}{{$store.getters.userInfo.money || 0}}</span>
						</view>
					</view>
				</view>
			</view>
			<view style="position:absolute;bottom:0;width:100%;">
				<s-swiper @updateClick="upgradeShow = true" :current="current" :data="card" @swiperChange="swiperChange"></s-swiper>
			</view>
		</view>
		
		<view class="u-flex " style="padding: 30rpx;">
			<image src="@/static/image/member/diamond_icon.png" style="width: 39rpx;height:31rpx;margin-right:12rpx;" mode="" />
			{{$t('member.privileges')}}
		</view>
		<view style="padding: 0 40rpx 20rpx 40rpx;font-size: 26rpx;color:#AAA;">
			{{$t('new.membertips')}}
		</view>
		<view class="table-box">
			<table class="level-table" border="1">
				<tr>
					<th>{{$t('member.levellabel')}}</th>
					<th style="width: 160rpx;">{{$t('new.accountbalance')}}</th>
					<th style="width: 360rpx;" colspan="2">{{$t('member.ratelabel')}}</th>
					<th style="width: 160rpx;">{{$t('member.purchaselabel')}}</th>
				</tr>
				<template v-for="item in table" >
					<tr class="data-tr">
						<td rowspan="3">{{item.name}}</td>
						<td rowspan="3">{{$currency + item.become_balance}}</td>
						<td class="small-td">level {{item.reward_invite[0].level}} member</td>
						<td class="small-td">{{item.reward_invite[0].fee}}%</td>
						<td style="font-size:30rpx;" rowspan="3">{{item.open_group_num}}</td>
					</tr>
					<tr class="data-tr">
						<td class="small-td">level {{item.reward_invite[1].level}} member</td>
						<td class="small-td">{{item.reward_invite[1].fee}}%</td>
					</tr>
					<tr class="data-tr">
						<td class="small-td">level {{item.reward_invite[2].level}} member</td>
						<td class="small-td">{{item.reward_invite[2].fee}}%</td>
					</tr>
				</template>
			</table>
		</view>

		<u-mask :show="upgradeShow" :zoom="false" class="flex-mask">
            <view class="nogoods-box">
				<view style="height:299rpx;width: 100%;">
					<view style="color:#FFF;font-size:32rpx;padding:36rpx 0;margin:0 45rpx;">
						<view style="height:29rpx;line-height:29rpx;flex:1;padding-left:29rpx;font-size:36rpx;">{{$t('new.upgradenow')}}</view>
					</view>
					<view class="content">
						{{$t("new.upgradecontent")}}
					</view>
				</view>
                <view class="inside">
					<view>
						{{$t('new.upgradedesc')}}
					</view>
					<view class="item-box">
						<view class="item">
							{{$t('wode.top')}}
							<view class="btn" @click="navTo('/pages/pay/pay')">
								{{$t('common.go')}}
							</view>
						</view>
						<view class="item">
							{{$t('new.groupbuying')}}
							<view class="btn" @click="navTo('/pages/home/home')">
								{{$t('common.go')}}
							</view>
						</view>
						<view class="item">
							{{$t('wode.invite')}}
							<view class="btn" @click="navTo('/pages/team/invite')">
								{{$t('common.go')}}
							</view>
						</view>
					</view>
                </view>
            </view>
            <u-image :show-loading="false" width="60rpx" height="60rpx" style="margin:0 auto;margin-top: 40rpx;" src="@/static/image/icon_delete_tou.png" mode="aspectFit"
                @click="upgradeShow = false"></u-image>
		</u-mask>

		<tabbar page="/pages/member/member"></tabbar>
	</view>
</template>

<script>
	import {
		leveltablelist,
		levelcard
	} from '@/api/user.js'
	import sSwiper from "@/components/swiper.vue"; 
	export default {
		components: {
			sSwiper
		},
		data() {
			return {
				current: 0,
				fixed: 9,
				table: [],
				card: [],
				color: ['#000','#FFE6D8', '#5D71AE', '#AF8239', '#6A54E5', '#FF9200', '#3E342B', '#00BD4F', '#FF230F'],
				upgradeShow: false,
			}
		},
		onLoad() {
			this.current = this.$store.getters.userInfo.level -1;
			this.load();
			this.loadCard();
		},
		onReady() {
		},
		onShow() {
		},
		computed: {
		},
		watch: {
		},
		methods: {
			async load() {
				let result = await leveltablelist();
				this.table = result;
			},
			async loadCard() {
				let result = await levelcard();
				this.card = result;
			},
			dotPosition(angle) {
				let radian = 2 * Math.PI /360 * angle;
				let x = 714 + Math.sin(radian) * 774 + 'rpx'
				let y = 750 - Math.cos(radian) * 774 + 'rpx'
				return {x,y}
			},
			angle(angle) {
				return `rotate(${angle}deg)`;
			},
			swiperChange(val) {
				this.current = val;
			},
			navTo(val, data) {
				let param = '';
				if (data) {
					param = '?';
					for (let i in data) {
						param += `${i}=${data[i]}&`
					}
				}
				uni.navigateTo({
					url: val + param
				})
			},
		},
		onHide() {
		},
		destroyed() {
		},
		onPullDownRefresh() {
		},
		onPageScroll(e) {
		},
	}
</script>

<style lang="scss" scoped>
	.home {
		padding-bottom: 158rpx;
	}
	.circle {
		margin-top: 141rpx;
		width: 1500rpx;
		height: 1500rpx;
		border:24rpx solid #4A484D;
		border-radius:50%;
		animation:fadenum 5s ;
		position:absolute;
		top:0;
		left: -375rpx;
		transition: all 0.3s ease-in-out 0s;
		.dot-box {
			position: relative;
			width: 100%;
			height: 100%;
			.circle-text {
				position: absolute;
				width: 100vw;
				top: 84rpx;
				left: calc(726rpx - 50vw);
				text-align: center;
				pointer-events: none;
				color: #FFF;
				.lv {
					font-size: 50rpx;
				}
				.balance {
					font-family: Alibaba PuHuiTi;//rubick;
					font-weight: 400;
					font-size: 40rpx;
				}
			}
			.dot {top: 0;
				left: 0;
				position: absolute;
				background: #AAA;
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				z-index: 1;

				transition: all 0.3s ease-in-out 0s;
				.dot-text {
					color: #AAA;
					font-size: 32rpx;
					position:absolute;
					top:-54rpx;
					left:-18rpx;
					width:60rpx;
					height: 22rpx;
					line-height:22rpx;
					text-align:center;
					transform-origin: center 70rpx;
					transition: transform 0.3s ease-in-out 0s;
				}
			}
			.currentDot {
				z-index: 1;
				top: 0;
				left: 0;
				background: #FF8E20;
				width: 24rpx;
				height: 24rpx;
				transform-style: preserve-3d;
				transition: all 0.3s ease-in-out 0s;
				.dot-text {
					color: #FF8E20;
					font-size: 32rpx;
					position:absolute;
					top:-54rpx;
					left:-18rpx;
					width:60rpx;
					height: 22rpx;
					line-height:22rpx;
					text-align:center;
				}
			}
			.currentDot:after {
				position: absolute;
				left: -15rpx;
				top: -15rpx;
				background: #FF8E204d;
				border: 2rpx solid #FF8E20;
				border-radius: 50%;
				z-index: 0;
				content: '';
				width: 48rpx;
				height: 48rpx;
				transform: translateZ(-10rpx);
				transition: transform 0.3s ease-in-out 0s;
			}
			
		}
	}
	.header {
		padding-top: var(--status-bar-height);
		overflow: hidden;
		position: relative;
		background: url(@/static/image/member/level_bg.png) no-repeat;
		background-size: 100% 100%;
		width: 750rpx;
		height: 760rpx;
	}
	.table-box {
		padding: 0 30rpx;
		font-size: 24rpx;
		.level-table {
			width: 100%;
			border-collapse: collapse;
			border-color: #E9E9E9;
			text-align: center;
			th {
				padding: 12rpx;
				font-weight: 400;
				background: #F6F6F6;
			}
		}
		.small-td {
			padding: 17rpx 0;
			background: inherit;
		}
		.data-tr {
			background: #FBFBFB;
		}
		// .data-tr:nth-child(odd) {
		// 	background: #F6F6F6;
		// }
		.data-tr:nth-child(6n+5),.data-tr:nth-child(6n+6),.data-tr:nth-child(6n+7) {
			background: #F6F6F6;
		}
	}

	.nogoods-box {
        overflow: hidden;
        margin: 0 auto;
        width: 670rpx;
		background-image: linear-gradient(0deg, #272733 28.999999999999996%, #494E60 100%);
		background-repeat: no-repeat;
        background-size: 670rpx 299rpx;
		background-color: #FFF;
		min-height: 299rpx;
        border-radius: 20rpx;
        text-align: center;
		.content {
			color: #C1C3D0;
			font-size: 36rpx;
			margin: 0 30rpx;
		}
        .inside {
			padding: 20rpx 40rpx 50rpx 40rpx;
			color: #65676B;
			font-size:30rpx;
			.item-box{ 
				margin-top: 28rpx;
				border-radius: 20rpx;
				overflow: hidden;
				.item {
					padding: 20rpx;
					margin: 4rpx 0;
					background: #EEE;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					.btn {
						border-radius: 10rpx;
						width: 160rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						color: #FFCB8C;
						font-size: 30rpx;
						background: linear-gradient(90deg, #636864 0%, #444444 100%);
					}
				}
				.item:nth-child(2n) {
					background: #F6F6F6;
				}
			}
        }
    }
	.flex-mask {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
</style>
